<template>
  <div class="contains">
    <home-header></home-header>
    <banner :list="bannerList"></banner>
    <icons :icons="iconList"></icons>
    <recommond :list="recommendList"></recommond>
    <week :list="weekendList"></week>
  </div>
</template>

<script>
  import HomeHeader from './component/Header'
  import Banner from './component/Banner'
  import Icons from './component/Icons'
  import Recommond from './component/Recommond'
  import Week from './component/Week'

  import axios from 'axios'
  import {mapState} from 'vuex'

  export default {
    name: 'Home',
    components: {
      HomeHeader,
      Banner,
      Week,
      Recommond,
      Icons
    },
    computed: {
      ...mapState(['city'])
    },
    methods: {
      getIndexInfo () {
        axios.get('/api/index.json?city=' + this.city).then(this.onSuccess)
      },
      onSuccess (res) {
        var response = res.data.data

        this.bannerList = response.swiperList
        this.iconList = response.iconList
        this.recommendList = response.recommendList
        this.weekendList = response.weekendList
      }
    },
    mounted () {
      this.lastCity = this.city
      this.getIndexInfo()
    },
    activated () {
      if (this.lastCity !== this.city) {
        this.lastCity = this.city
        this.getIndexInfo()
      }
    },
    data () {
      return {
        lastCity: '',
        bannerList: [],
        iconList: [],
        recommendList: [],
        weekendList: []
      }
    }
  }
</script>

<style>
  .contains {
  }

</style>
